This lesson will teach you how to improve the look of your document. When you are finished you will be able to format text, just like in a word processor, you will also be able to add colour to your pages along with headings and horizontal lines.
If you have ever used a word processor on your computer you will know the changes you can make to text at the click of a button. Many of these changes can also be made to text in an HTML document except that they are slightly more complicated to enforce.
This chapter will teach you how to enforce these changes to text in an HTML document.
The break tag <br>If you are writing text into a HTML document and you want to skip right to the start of the next line, then you might be tempted to do the following:
<html>
<body>
this is an example
of how, regardless
of how many times
you press enter,
the text will continue
on the same line
until it reaches the
end of the window
</body>
</html>
Unfortunately. If you do this, you will find that the browser prints everything on one line, until it gets to the end of the viewable screen. The text does not skip to the next line. The way to do it properly is to use the <br> tag. This is a standalone tag because it has no end tag. Simply entering this in the required place skips the subsequent text to the start of the next line. So this is what you would type in to get the desired effect above (bear in mind that the text now makes no sense as the text does skip to the next line now):
<html>
<body>
this is an example<br>
of how regardless<br>
of how many times<br>
you press enter<br>
the text will continue<br>
on the same line<br>
until it reaches the<br>
end of the window<br>
</body>
</html>
Type it in, and you will see that the above does indeed work
as expected
As is obvious from the heading of this section, the <p> tag is used for inserting paragraphs into your documents. When you want a new paragraph enter the <p> and continue. When you have finished the paragraph, type </p>. You can get away without using the </p> tag at the end, and just use <p> throughout, but this is lazy HTML, and some browsers might not display it correctly.
Adding preformatted text <pre> </pre>Using the <pre> tag is another way of positioning your text the way you want it. It is probably the easiest to use but its drawback is that when preformatted text is used it appears as if written by a mono-spaced typewriter. The text will, however, be formatted just as you see it in an ASCII editor (i.e. Ed), and will include things like indentations (formed by pressing Tab).
I prefer not to use it, because you can format most of your
text using better methods, such as tables, but these will not
be covered until lesson 5 .
HTML provides the user with six different sized headings. These headings are labelled h1 to h6 with h1 being the largest. To enter a heading first type the start tag e.g.<h2> then type your heading and then your closing tag, which in this case would be </h2>. Why don't you experiment with the different sizes now using "notepad" and your browser.
Headings can be aligned to the left, right or centre of a page by using the "align=" attribute in the starter tag. Heading sizes should be used in descending order so as future browsers can index your site. However, you can use a heading tag as many times as you want, so you can play with the h1 (the largest) tag more than once in your document.
The blockquote tag <blockquote> </blockquote>This tag indents the text that is contained within the start and end tags, acting like a Tab in a word processor. It is very effective for making paragraphs stand out.
<html>
<body>
this text is up against the border
<blockquote>
but by using the blockquote<br>
tag I can indent this<br>
paragraph.<p>
As you can see I can still use the<br>
break and paragraph tags.
Well, so far, we have learned how to modify the positions of bits of text, but what about the spanglyness you were promised? Well, stuff like making text bold is just as easy (if not easier) as everything above, but I felt like breaking up the article a bit, that's all. Now, my minions, we will learn the art of styling! (But not in a hairdresser's)
Most of these tags are pretty self explanatory, so I'll just give you them like this:
Bold
To enforce bold type <b>
To disable bold type </b>
Italics
To enforce Italics type <I>
To disable italics type </I>
Underline
To enforce underline type <u>
To disable underline type </u>
Teletype
Text appears as if typed by a mono-spaced typewriter
To enforce teletype type <tt>
To disable teletype type </tt>
Code
Text appears as above - useful for displaying source code
(or something) on your site in a different style to the
rest...
To enforce code type <code>
To disable code type </code>
Strike-through
Text has a line through the centre of it
To enforce strike-through type <strike>
To disable strike-through type </strike>
Superscript
Text is above the level of other text
To enforce superscript type <sup>
To disable superscript type </sup>
Subscript
Text is below the level of other text
To enforce subscript type <sub>
To disable subscript type </sub>
Small font
Text is presented in a small font
To enforce small font type <small>
To disable small font type </small>
Large font
Text is presented in a large font
To enforce large font type <big>
To disable large font type </big>
By using combinations of these tags, it is possible to produce different effects / levels of spanglyness.
<html>
<body>
<br>this text is <b>bold</b>
<br>this text is <u>underlined</u>
<br>this text is <i>in italics</i>
<br>this text is <small>small</small>
<br>this text is <big>large</big>
<br>this text is <sub>subscript</sub>
<br>this text is <sup>superscript</sup>
<br>this text is
<strike>strike-through</strike>
<br>this text is <tt>tele-type</tt>
<br>this text is <code>the same as above, using a
different tag</code>
<br>this text is <b><i>bold
italic</b></i>
<br>this text is <u><b>underlined and
bold</b></u>
<br>this text is
<strike><sup>strike-through and
superscript</strike></sup>
<br>this text is <b>bold now</b>,<u>
underlined now,<b> bold and underlined now</u>,
bold now</b>
<br>this text is <sub>subscript
now,<b><u> bold and underlined and subscript
now</sub>, bold and underlined now</u>, bold
now</b>
</body>
</html>
"Woa! That's some pretty difficult stuff there!" you might be saying. Well, yes, at first it can seem complicated, but after a while, you'll see the logic and find styling a lot easier. And you didn't even have to go near those scissors, did you?
There are other things you can type to get the same results as above. The difference with these other tags is that _if_ computers start to read text with 'emotion', these tags will distinguish different emphasis points. I have decided however not to include them, with the only exception being <code> and <tt>, because it is easier for you to just learn the physical format commands when starting or else you will end up getting confused. I do.
The <basefont> tagYou can set the font of your page to any font you have on your hard disk. You must however bear in mind that if you put your page on the WWW then it is possible that not all those viewing your page will have that font on their hard disk. If this happens then your page will not be presented in the way that you wanted.
The most common fonts you will find on a computer are System
and Helvetica. Therefore if it
is important to you that everyone view your site the same way
that you do then these are the two you should probably go
for.
Another option you could go for is selecting two or more different fonts that your text could be presented in. For example you could set your first choice font as say "CGTriumvirate", your second choice as "Arial" (for those nasty peecee freaks) and your third choice as "Helvetica". I recommend however that your last choice be either "Helvetica" or "System" therefore if the person viewing your site has none of the other fonts, the page will still present properly on an Amiga (you are aiming for an Amiga readership, aren't you?)
Face, Color and Size are the three main attributes of the basefont tag. Colour is spelt the American way.
Face means font
To set the font, type: <basefont face="font">
To select more than one font, type: <basefont
face="font1","font2","font3">
Color will be discussed a bit later on...
Size sets the size of the font and is measured on a scale of 1 to 7 with 3 being a normal size font.
To set the size, type: <basefont size=x> Where x is a number from 1 to 7
You can include as many of the above attributes as you like. e.g. <basefont face="lucida casual" size=5>
Note: Netscape does not support the basefont tag. It does however support the font tag, as do all browsers. Not that you'll be using Netscape until Amozilla appears...
The font tag
The font tag uses the same attributes of the
<basefont> tag. It also has a major difference in that
it requires an end tag. The purpose of the <font> tag
is to change the font in the middle of the document but only
for a certain period.
The font tag makes no difference at all unless attributes are set in the start tag. e.g.
<font face="Helvetica" size=3 color=#ff0000> this text is in Helvetica </font>
If you have set the basefont size to 2 and you want to change it to 4 using the font tag then you can use this attribute:
<font size=+2>this text is 2 sizes bigger than the rest</font>
Now we move on to the super-spangly colour
section!
You saw above that I set the colour of the font to "#ff0000"
which is the RGB value for red. What is an RGB value? The RGB
value of a colour is the amount of red, green and blue that
are combined to display that colour on your monitor.
To list a colour in an HTML document you must display it with a # sign in front of it and then 6 characters, 2 for each amount, defining the RGB value.
You can use any amount from 0 to 255 of each colour, but do not use decimal numbers however. You must use hexadecimal notation.
The designers of HTML have copped on to the fact that very few people do actually understand how to picture a colour based solely on its RGB value. So, now they have defined 16 colours which you can add to your document simply by typing the name of the colour you want, i.e. color=red.
Here is a complete listing of the colours you can use without knowing their RGB value:
Black | #000000 |
Silver | #C0C0C0 |
Gray | #808080 |
White | #FFFFFF |
Maroon | #800000 |
Red | #FF0000 |
Fuchsia | #FF00FF |
Green | #008000 |
Lime | #00FF00 |
Olive | #808000 |
Yellow | #FFFF00 |
Navy | #000080 |
Blue | #0000FF |
Teal | #008080 |
Aqua | #00FFFFF |
You can use these colours for either text or background. You will learn how to colour backgrounds in a short while.
Colouring text
By using information gathered so far, you probably have
already figured out how to colour your text. If not, then
read on.
Text colour can be set in three places. In two of those
places it is set using the "color=" attribute and in the
other it is set using the "text=" attribute, just to make
life difficult
Colouring text by using the <body> tag
The <body> tag has several attributes relating to text
colour in a document. The first, which is used for setting
the colour of regular text, looks like this:
<body text=aqua>
You will learn more about links later on, but for now you will just learn how to change the colour of links in text. To specify the colour of a link in text simply use the attribute "link=", for example <body link=blue>
There are two other colours that can be set concerning links, these are the colours for a visited link and an active link. A visited link is a link that you have already visited (d'oh!). An active link is a link that is open, this is only ever viewed when a page has multiple frames (which won't be discussed today).
To set the colour of a visited link use the attribute "vlink=" and to set the colour of an active link use the attribute "alink=". For example: <body vlink=green alink=aqua>
Colouring text by using the <basefont> or <font> tags Both of these tags use the same attribute to set or change the colour of font. When you learned about these tags in the earlier ter you learned about attributes such as "face" and "size". Well to set the colour you simply use the attribute "color" e.g. <basefont color=red>
or, for the <font> tag,
<font color=red>red</font>
Colouring the background
There are two ways to enhance your background with colour,
you can:
A) Add a colour to it
B) Add a tiled image to it
Adding a colour
To add a colour to your background you simply use this
attribute in the <body> tag: "bgcolor=".
e.g. <body bgcolor=red>
If you are overwhelmed by the amount of attributes of the <body> tag do not worry because I will provide a complete listing of these attributes at the end of the chapter.
Adding an image
This is the first example you have come across so far of
adding an external file to your HTML document. Before you do
anything with your HTML code I recommend that you move the
image you want to use into the same directory as the HTML
document. Therefore you will not need to specify a full path
to the image.
Be aware that whilst some browsers let you view images from documents on your hard drive without having to specify the case of the filename, a web server will not be so forgiving. I always rename all the files to be uploaded so that they have lowercase names, and type the filenames in lowercase within my HTML document.
Assuming that your image is now in the same directory as your HTML document this is the attribute of the <body> tag that you would use:
<body background="image.gif">
but be careful - some images are just not meant to be tiled
A bad image to use for is one that does not repeat very well. By this I mean that the edges do not correspond. Make sure also that the image is lightly coloured, so that any text will be easily visible on top of the image.
These are the two factors you must take into account when choosing a background.
You should also specify a "bgcolor=" body tag, with a similar main colour to your image. This allows people viewing the page with images turned off, or with text only browsers to view the page and get a feel for what it should be like, and hopefully they will also be able to read the text easily.
<html>
<head>
<title>Make sure your text is visible
</title>
</head>
<body text=white background="circles.gif"
bgcolor=#000099>
This text is visible because it is in contrast with the
background
</body>
</html>
Separating text by using horizontal lines
<hr>
If you have ever surfed the 'net you may have noticed that a
lot of websites separate their text using horizontal lines.
To insert a horizontal line, simply use the tag <hr> anywhere in your document. A new paragraph is automatically started after the line.
The <hr> tag also has attributes. These are:
size, width, color and align.
Size sets the thickness of the line in pixels
Width sets the width of the line as a percentage of the
viewing screen
Color sets the colour of the line using either RGB value or
one of the presets
Align sets the alignment to left, right or center.
<html>
<head>
<title>Horizontal Lines
</title>
</head>
<body >
<basefont>
this text is above the first horizontal line
<hr size=2 width=75% color=red align=right>
this text is between the first and second horizontal
lines
<hr size=4 width=50% color=black align=center>
this text is between the second and third horizontal
lines
<hr size=2 width=75% color=red align=left>
this text is after the third horizontal line
</body>
</html>
It is also possible to use graphics as horizontal lines. These however take time to download and they do not appear on browsers with pictures turned off or with text only browsers. HTML horizontal lines take very little time to download and appear on all browsers. You will also need knowledge of the image tag, which will not be discussed until next lesson.
I promised you a table with all the <body> tag attributes that apply on Amigas (there are others, but they don't display in miggy browsers), so here you go. Unfortunately, ASCII has no formatting options, so the table doesn't look very nice. Sorry!
<body>
text= colour
link= colour
vlink= colour
alink= colour
bgcolor= colour
background= image
I have not included the results of each attribute because they have already been discussed in detail earlier in the book. The only reason for this 'table' is reference.
If you set one colour in a HTML document you should set them all, otherwise the colours set by the viewers browser might clash with the one you have selected. For example if you only set your text to aqua and the viewer has his browser set to display a background as aqua then that person will not see any text on your page. Not that the example given is likely, or anything.
Right, well that's the end of another HTML lesson. Thanks for reading this. Once again, a sample HTML page has been included for you to muck around with. So go do some HTML!
<html>I am able to</pre> <p>I can format my text so as it is<br>
----------------- use preformatted text to make it appear in the order I want it to
Congratualtions! Another tutorial has been completed! Next lesson, you will learn how to make super-spangly pages using images!Come back soon, my dedicated followers, for another helping of webmaster Drew's condensed HTML milk powder! <ahem>
Drew Green sat up writing this tutorial while the rest of you were safely tucked up in bed, on the 23rd and 24th of August. He now has record-breakingly large bags under his eyes, and is steadily going mad. If you have any comments or suggestions or hate-mail about the tutorial, then feel free to mail me at Drew.Green@btinternet.com, with the subject "My condolences on you finally going insane", just to give my mailbox that extra 'mad' flavour.
Or alternatively, you could flame me on ICQ, with my number being 46385140.
Comments? Questions? Email
Woa@trogsoft.freeserve.co.uk with your views on the mag.
We like feedback. Oh yes we do. (Indeed - Ed